import React, { ReactElement, useContext } from 'react';
import { View, Image } from 'react-native';

import styles from './style';
import Button from '../../../../components/Button';
import { back } from '../../actions';
import { transparentBack } from '../../../../constant/resource';
import { Store } from '../../reducer';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const {
    isRequestFailed,
    showDownloadResource,
    showLiveEnd,
    showPrepare,
    showSignIn,
    showLock
  } = state;

  if (
    !(
      isRequestFailed ||
      showDownloadResource ||
      showLiveEnd ||
      showPrepare ||
      showSignIn ||
      showLock
    )
  ) {
    return <View />;
  }

  return (
    <Button
      hitSlop={{ left: 20, top: 20, right: 20, bottom: 20 }}
      style={styles.back}
      onPress={back}
    >
      <Image style={styles.backIcon} source={transparentBack} />
    </Button>
  );
};
